<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup">
    <h2 class="aui-gutter-column-xs">{{'common_basic_info_label'| i18n}}</h2>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_name_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="nameErrorTip">
            <input lv-input formControlName="name" type="text">
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_type_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select [lvOptions]="typeOptions" formControlName="type" lvValueKey="value" lvMode="single"
                [lvDisabled]="rowData">
            </lv-select>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            Endpoint
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_object_storage_endpoint_tip_label' | i18n}}"
                lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control [lvErrorTip]="endpointErrorTip">
            <input lv-input formControlName="endpoint" type="text">
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_protocol_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select [lvOptions]="protocolOptions" formControlName="protocol" lvValueKey="value" lvMode="single"
                [lvDisabled]="rowData">
            </lv-select>
        </lv-form-control>
    </lv-form-item>
    <ng-container
        *ngIf="formGroup?.value?.protocol === '1' && formGroup.value.type === dataMap.objectStorageType.pacific.value">
        <lv-form-item>
            <lv-form-label>
                {{'protection_fc_cert_label' | i18n}}
            </lv-form-label>
            <lv-form-control>
                <lv-upload lvAccept=".pem" lvShowUpload="false" (lvFilesChange)="filesChange($event, 'pem')"
                    [lvFilters]="filters"></lv-upload>
            </lv-form-control>
        </lv-form-item>
    </ng-container>
    <lv-form-item>
        <lv-form-label lvRequired>
            AK
        </lv-form-label>
        <lv-form-control [lvErrorTip]="maxLengthErrorTip">
            <input lv-input formControlName="AK" type="text">
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            SK
        </lv-form-label>
        <lv-form-control [lvErrorTip]="maxLengthErrorTip">
            <aui-inupt-with-eye formControlName="SK" (focus)="clearSk($event)" (blur)="skBlur()"></aui-inupt-with-eye>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>
            {{'protection_proxy_host_label' | i18n}}
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_object_storage_proxy_tip_label' | i18n}}"
                lvTooltipTheme="light" class="configform-constraint" lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control [lvErrorTip]="agentErrorTip">
            <lv-select [lvOptions]="proxyOptions" formControlName="agent" lvValueKey="value" lvMode="multiple"
                lvShowFilter lvShowCheckAll lvFilterKey="label" lvFilterMode="contains"
                [lvContentTemplate]="proxyTpl"></lv-select>
        </lv-form-control>
    </lv-form-item>
</lv-form>
<h2 class="header">
    {{'system_proxy_server_label' | i18n}}
    <lv-switch class="switch" [(ngModel)]="proxyServer" (ngModelChange)="serverChange($event)"></lv-switch>
</h2>
<lv-alert lvType="warning" *ngIf="proxyServer">{{'protection_object_storage_proxy_help_label' | i18n}}</lv-alert>
<lv-form [formGroup]="formGroup" class="formGroup" *ngIf="proxyServer">
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'protection_server_url_label' | i18n}}
            <i lv-icon="aui-icon-help" lv-tooltip="{{ 'protection_object_url_http_tip_label' | i18n }}"
                lvTooltipTheme="light" lvTooltipPosition="right" class="configform-constraint" lvColorState="true"></i>
        </lv-form-label>
        <lv-form-control [lvErrorTip]="urlErrorTip">
            <input lv-input type="text" formControlName="serverUrl">
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>
            {{'common_username_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="serverErrorTip">
            <input lv-input type="text" formControlName="username">
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>
            {{'common_password_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="serverErrorTip">
            <aui-inupt-with-eye formControlName="password" (focus)="clearPwd($event)"
                (blur)="pwdBlur()"></aui-inupt-with-eye>
        </lv-form-control>
    </lv-form-item>
</lv-form>

<ng-template #proxyTpl let-item>
    <lv-group class="proxyInfo">
        <lv-group lvGutter="4px">
            <i lv-icon="{{
                      item.linkStatus ===
                      dataMap.resource_LinkStatus_Special.normal.value
                        ? 'aui-host-online'
                        : 'aui-host-offline'
                    }}"></i>
            <span>{{item.label}}</span>
            <span class="aui-text-help-sm">
                {{
                item.extendInfo.scenario === dataMap.proxyHostType.builtin.value
                ? hostBuiltinLabel
                : hostExternalLabel
                }}</span>
            <span class="guide-recommend-label" *ngIf="showGuideNew(item)">
                {{'protection_guide_new_resource_label' | i18n}}
            </span>
        </lv-group>
    </lv-group>
</ng-template>